<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ page import="hk.pojo.CateInfo" %>
<%@ page import="hk.dao.DaoCate" %>
<%@ page import="hk.dao.impl.DaoCateImpl" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">

    <link rel="stylesheet" type="text/css" href="/css/edittable.css"  ></link>
    <link rel="stylesheet" type="text/css" href="/css/validate.css"  ></link>
    <link rel="stylesheet" type="text/css" href="/css/button.css">

    <script  src="js/jquery-1.8.0.js"></script>
    <script>
        $(function(){
            $("#bigcateId").change(function(){
                $.ajax({
                    type:"post",
                    url:"CateServlet",
                    data:{flag:"getSubCate",bigcateId:this.value},
                    dataType:"json",
                    success:function(cateList){
                        $("#smallcateId").empty();
                        $("#smallcateId").append("<option>==请选择==</option>");
                        for(var i=0;i<cateList.length;i++){
                            var cate=cateList[i];
                            var str="<option value='"+cate.id+"'>"+cate.cateName+"</option>";
                            $("#smallcateId").append(str);
                        }
                        $("#smallcateId").val("${goods.smallCateId}");
                    }
                });
            });

            //给头象上传对应的div加个点击事件
            $("#buttonFile").click(function(){
                $("#file1").click();
            });

            $("#bigcateId").val("${goods.bigCateId}");
            $("#bigcateId").change();



        });
    </script>

    <script type="text/javascript">
        function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
            $("#preview").css("display","block");
            if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = width;
                imgObjPreview.style.height = height;
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
        }
    </script>

    <style>
        #divImg {
            width: 130px;
            height: 180px;
            background-color: lightgray; /* 使用背景色作为图片加载前的占位符 */
            position: relative; /* 使子元素可以相对于这个容器定位 */
            overflow: hidden; /* 隐藏超出容器的图片部分 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 4px; /* 添加圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 5px; /* 内边距，使图片不会紧贴边框 */
            text-align: center; /* 文本和图片居中 */
        }
        #preview {
            width: 100%; /* 图片宽度设置为容器宽度的100% */
            height: 100%; /* 图片高度设置为容器高度的100% */
            object-fit: cover; /* 保持图片的宽高比，同时填充整个元素的内容框 */
            display: block; /* 消除图片底部的间隙 */
            margin: auto; /* 水平和垂直居中（与 text-align: center 配合使用）*/
        }
        /* 可选：添加加载指示器或占位符图片 */
        #preview {
            /* 这里可以添加加载指示器的样式，或者使用一个占位符图片 */
            /*background: url('http://localhost:8080/images/addPic.jpg') no-repeat center center;*/
            background-size: cover;
            background-position: center center; /* 将背景图片水平和垂直居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            display: block; /* 消除元素底部的间隙 */
            margin: auto; /* 水平居中（但此处对背景图像无效，主要用于块级元素内容居中）*/
        }

        .image-upload-container {
            display: inline-flex;/* 让容器内的元素横向排列 */
            align-items: center; /* 垂直居中 */
        }
        /*校对CSS*/
        .info{
            font-size:12px;
            font-weight:bold;
            color:blue;
        }

        .ok{
            font-size:12px;
            font-weight:bold;
            color:green;
        }

        .error{
            font-size:12px;
            font-weight:bold;
            color:red;
        }

    </style>
</head>

<body>
    <%
        DaoCate daoCate=new DaoCateImpl();
        List<CateInfo> cateList = daoCate.getCateList(0);
        request.setAttribute("cateList", cateList);
    %>
    <div class ="div_title">
        <div class="div_titlename"> <img src="/images/san_jiao.gif" ><span>商品添加</span></div>
    </div>
    <form action="GoodsServlet" method="post" enctype="multipart/form-data" onsubmit="return validate()">
        <input type="hidden" name="flag" value="add" >
        <input type="hidden" name="goodsId" value="${goods.id }" >
        <table class="edit_table" >
            <tr>
                <td class="td_info">商品名称:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="goodsName" value="${goods.goodsName }"  onfocus="showInfo('goodsName_msg','填写要求：2-20个字符/汉字')"
                           onblur="validateGoodsName(this)" id="goodsName"/>
                </td>
                <td>
                    <label class="validate_info" id="goodsName_msg" ></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">价格:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="price" value="${goods.price }" onfocus="showInfo('price_msg','填写要求：大于0的数字')"
                           onblur="validatePrice(this)" id="price"/>
                </td>
                <td>
                    <label class="validate_info" id="price_msg"></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">单位:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="unit" value="${goods.unit }" onfocus="showInfo('unit_msg','填写要求：必填')"
                           onblur="validateUnit(this)" id="unit"/>
                </td>
                <td>
                    <label class="validate_info" id="unit_msg"></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">厂商:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox"  name="producter" value="${goods.producter }" onfocus="showInfo('producter_msg','填写要求：2-20个字符/汉字')"
                           onblur="validatePro(this)" id="producter"/>
                </td>
                <td>
                    <label class="validate_info" id="producter_msg" ></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">大分类:</td>
                <td class="td_input_short">
                    <select type="text" class="txtbox"  name="bigcateId" id="bigcateId" onchange="validateLevelBig(this)"/>
                    <option value="-1">==请选择==</option>
                    <c:forEach var="cate" items="${cateList }" >
                        <option value='${cate.id}'>${cate.cateName}</option>
                    </c:forEach>
                    </select>
                </td>
                <td>
                    <label class="validate_info" id="bigcateId_msg"></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">小分类:</td>
                <td class="td_input_short">
                    <select name="smallcateId" id="smallcateId" onchange="validateLevelSmall(this)">
                    <option value="-1">==请选择==</option>
                        <option value="-1">==请选择==</option>
                    </select>
                </td>
                <td>
                    <label class="validate_info" id="smallcateId_msg"></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">图片:</td>
                <td class="td_input_short">
                    <div class="image-upload-container">
                        <input id="file1" type="file" name="photo" style="display:none" onchange="setImagePreview(this,divImg,preview,'100px','125px');" >
                        <button id="buttonFile" type="button" class="button">点我上传图片</button>
                    </div>
                </td>
                <td>
                    <div id="divImg" class="image-preview">
                        图片展示效果：
                        <img id="preview" src="GoodsServlet?flag=showPic&goodsId=${goods.id }" onerror="this.onerror=null; this.src='http://localhost:8080/images/addPic.jpg';">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td_info">备注:</td>
                <td class="td_input_short">
                    <textarea rows="4" cols="27" name="des" class="txtarea" > ${goods.des }</textarea>
                </td>
            </tr>
            <tr>
                <td class="td_info"> </td>
                <td>
                    <input class="form_btn" type="submit" value="提交" />
                    <input type="reset"  class="form_btn" value="重置" /> </td>
                <td>
                    <label id="result_msg" class="result_msg">${msg}</label>
                </td>
            </tr>
        </table>
    </form>

<%--新增校验--%>
<script>
    function validate(){
        var result=true;

        if(validateGoodsName( document.getElementById("goodsName") )==false){
            result=false;
        }

        if(validatePrice( document.getElementById("price") )==false){
            result=false;
        }

        if(validateUnit( document.getElementById("unit") )==false){
            result=false;
        }

        if(validatePro( document.getElementById("unit") )==false){
            result=false;
        }

        if(validateLevelBig( document.getElementById("bigcateId") )==false){
            result=false;
        }

        if(validateLevelSmall( document.getElementById("smallcateId") )==false){
            result=false;
        }

        if(result==true){
            result=confirm("验证通过! 确定要提交吗");
        }

        return result;
    }

    function showInfo(labelId ,msg){
        $("#"+labelId).html(msg);
        $("#"+labelId).removeClass().addClass("info");
    }

    function showError(labelId ,msg){
        $("#"+labelId).html(msg);
        $("#"+labelId).removeClass().addClass("error");
    }

    function showOk(labelId){
        $("#"+labelId).html("√");
        $("#"+labelId).removeClass().addClass("ok");
    }

    function validateGoodsName(item){
        var result=true;

        if(item.value==""){
            result=false;
            showError(item.id+"_msg",  "输入错误! 商品名不能为空");
        }
        else{
            //定义正则表达式：单个英文字母（小写a-z、大写A-Z）、数字（0-9）或汉字
            var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,20}$/;

            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "商品名格式错误! ");
            }
            else{
                showOk(item.id+"_msg");
            }
        }
        return result;
    }

    function validatePrice(item){
        var result=true;

        if(item.value==""){
            result=false;
            showError(item.id+"_msg",  "输入错误! 价格不能为空");
        }
        else{
            //定义正则表达式：首位1-9 末位0-9
            var reg = /^[1-9]\d*$/;

            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "价格格式错误! ");
            }
            else{
                showOk(item.id+"_msg");
            }
        }
        return result;
    }

    function validateUnit(item){
        var result=true;

        if(item.value==""){
            result=false;
            showError(item.id+"_msg",  "输入错误! 单位不能为空");
        }
        else{
                showOk(item.id+"_msg");
        }
        return result;
    }

    function validatePro(item){
        var result=true;

        if(item.value==""){
            result=false;
            showError(item.id+"_msg",  "输入错误! 厂商名不能为空");
        }
        else{
            //定义正则表达式：单个英文字母（小写a-z、大写A-Z）、数字（0-9）或汉字
            var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,20}$/;

            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "厂商名格式错误! ");
            }
            else{
                showOk(item.id+"_msg");
            }
        }
        return result;
    }

    function validateLevelBig(item){
        var result=true;

        if(item.value=="-1") {
            result=false;
            showError(item.id+"_msg",  "必须选择大分类! ");
        }
        else{
            showOk(item.id+"_msg");
        }

        return result;
    }

    function validateLevelSmall(item){
        var result=true;

        if(item.value=="-1") {
            result=false;
            showError(item.id+"_msg",  "必须选择小分类! ");
        }
        else{
            showOk(item.id+"_msg");
        }

        return result;
    }
</script>
</body>
</html>